<template>
  <div class="comp-verify-code">
    <a href="javascript:;" class="ui-btn ui-btn--gray ui-btn--block" @click="getCode" v-if="isLoading===false" :disabled="codeLock">{{codeBtnText}}</a>
    <a href="javascript:;" class="ui-btn ui-btn--gray ui-btn--block" @click="getCode" v-if="isLoading===true" disabled>{{$t('common.waiting')}}...</a>
  </div>
</template>

<script type="text/babel">
import commonService from "../common/commonService";
const REG_EMAIL = /@([a-zA-Z0-9]+[_|\_|\.\-]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,}$/;
export default {
  props: {
    onClick: {
      type: Function,
      default: null
    },
    onSuccess: {
      type: Function,
      default: null
    },
    onFail: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      codeBtnText: "获取验证码",
      codeLock: false,
      isLoading: false
    };
  },
  methods: {
    getCode() {
      let that = this;
      let loopTimeId = null;
      let count = 60;

      if (typeof this.onClick === "function") {
        this.onClick();
      }
      // 从window.app.user.value中获取用户信息
      //登录后发送验证码不需要手机号信息
      let name = "";
      if (REG_EMAIL.test(localStorage.getItem("account-no"))) {
        name = "EMAIL";
      } else {
        name = "PHONE";
      }
      this.isLoading = true;
      commonService
        .sendCode({
          sendType: name,
          sendAccount: window.localStorage.getItem("account-no")
        })
        .done(rep => {
          if (rep.code == window.CODE.SUCCESS) {
            this.codeLock = true; //获取验证码锁定 true：正在获取验证码，不可点击   false：可以点击
            send();
            if (typeof this.onSuccess === "function") {
              this.onSuccess(rep);
            }
            loopTimeId = setInterval(function() {
              send();
            }, 1000);
          } else {
            if (typeof this.onFail === "function") {
              this.onFail(rep);
            }
          }
        })
        .fail(rep => {
          this.onFail(rep);
        })
        .always(() => {
          this.isLoading = false;
        });

      function send() {
        if (count > 0) {
          if (that.$i18n) {
            that.codeBtnText = count + that.$t("common.secondUnit");
          } else {
            that.codeBtnText = count + "s";
          }
          count--;
        } else {
          clearInterval(loopTimeId);
          that.codeBtnText = that.$t("common.retryVerifyCode");
          that.codeLock = false;
        }
      }
    }
  }
};
</script>

<style lang="sass" rel="stylesheet/scss">
    .comp-verify-code {
        display: inline-block;
        vertical-align: middle;
        font-size: 12px;
        .ui-btn {
            padding: 0;
            font-size: 12px;
            height: 32px;
            line-height: 32px;
        }
    }
</style>